<template>
  <div class="choose" v-show="show" @touchmove.capture="stop($event)" @click="hide">
    <div>
      <div class="citem" v-if="!type" v-for="item in shebao" :key="item.name">
          <div>{{item.name}}</div>
          <router-link class="ca" v-for="e in item.children" :to="e.url + '_shebao'" :key="e.name" tag="div">{{e.name}}</router-link>
      </div>
      <div class="citem" v-if="type" v-for="item in shuichou" :key="item.name">
          <div>{{item.name}}</div>
          <router-link class="ca" v-for="e in item.children" :to="e.url + '_shuichou'" :key="e.name" tag="div">{{e.name}}</router-link>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      shebao: [
        {
          name: "A-D",
          children: [
            {
              name: "北京市社保",
              url: "/beijingshi"
            },
            {
              name: "毕节市社保",
              url: "/bijieshi"
            },
            {
              name: "长春市社保",
              url: "/changchunshi"
            },
            {
              name: "常州市社保",
              url: "/changzhoushi"
            },
            {
              name: "长沙市社保",
              url: "/changshashi"
            },
            {
              name: "崇左市社保",
              url: "/chongzuoshi"
            },
            {
              name: "重庆市社保",
              url: "/chongqingshi"
            },
            {
              name: "成都市社保",
              url: "/chengdushi"
            },
            {
              name: "大连市社保",
              url: "/dalianshi"
            },
            {
              name: "东莞市社保",
              url: "/dongguanshi"
            },
            {
              name: "定西市社保",
              url: "/dingxishi"
            }
          ]
        },
        {
          name: "E-H",
          children: [
            {
              name: "抚州市社保",
              url: "/fuzhoushi"
            },
            {
              name: "佛山市社保",
              url: "/foshanshi"
            },
            {
              name: "广州市社保",
              url: "/guangzhoushi"
            },
            {
              name: "桂林市社保",
              url: "/guilinshi"
            },
            {
              name: "贵阳市社保",
              url: "/guiyangshi"
            },
            {
              name: "衡水市社保",
              url: "/hengshuishi"
            },
            {
              name: "哈尔滨市社保",
              url: "/haerbinshi"
            },
            {
              name: "杭州市社保",
              url: "/hangzhoushi"
            },
            {
              name: "湖州市社保",
              url: "/huzhoushi"
            },
            {
              name: "合肥市社保",
              url: "/hefeishi"
            },
            {
              name: "惠州市社保",
              url: "/huizhoushi"
            },
            {
              name: "河源市社保",
              url: "/heyuanshi"
            },
            {
              name: "河池市社保",
              url: "/hechishi"
            },
            {
              name: "海口市社保",
              url: "/haikoushi"
            }
          ]
        },
        {
          name: "I-L",
          children: [
            {
              name: "吉安市社保",
              url: "/jianshi"
            },
            {
              name: "济南市社保",
              url: "/jinanshi"
            },
            {
              name: "济宁市社保",
              url: "/jiningshi"
            },
            {
              name: "揭阳市社保",
              url: "/jieyangshi"
            },
            {
              name: "开封市社保",
              url: "/kaifengshi"
            },
            {
              name: "昆明市社保",
              url: "/kunmingshi"
            },
            {
              name: "廊坊市社保",
              url: "/langfangshi"
            },
            {
              name: "连云港市社保",
              url: "/lianyungangshi"
            },
            {
              name: "六安市社保",
              url: "/liuanshi"
            },
            {
              name: "莱芜市社保",
              url: "/laiwushi"
            },
            {
              name: "聊城市社保",
              url: "/liaochengshi"
            },
            {
              name: "来宾市社保",
              url: "/laibinshi"
            },
            {
              name: "丽江市社保",
              url: "/lijiangshi"
            },
            {
              name: "兰州市社保",
              url: "/lanzhoushi"
            }
          ]
        },
        {
          name: "M-P",
          children: [
            {
              name: "马鞍山市社保",
              url: "/maanshanshi"
            },
            {
              name: "南京市社保",
              url: "/nanjingshi"
            },
            {
              name: "南通市社保",
              url: "/nantongshi"
            },
            {
              name: "宁波市社保",
              url: "/ningboshi"
            },
            {
              name: "南宁市社保",
              url: "/nanningshi"
            },
            {
              name: "南充市社保",
              url: "/nanchongshi"
            },
            {
              name: "盘锦市社保",
              url: "/panjinshi"
            },
            {
              name: "平顶山市社保",
              url: "/pingdingshanshi"
            }
          ]
        },
        {
          name: "Q-T",
          children: [
            {
              name: "秦皇岛市社保",
              url: "/qinhuangdaoshi"
            },
            {
              name: "青岛市社保",
              url: "/qingdaoshi"
            },
            {
              name: "清远市社保",
              url: "/qingyuanshi"
            },
            {
              name: "黔西南州社保",
              url: "/qianxinanzhou"
            },
            {
              name: "日照市社保",
              url: "/rizhaoshi"
            },
            {
              name: "石家庄市社保",
              url: "/shijiazhuangshi"
            },
            {
              name: "沈阳市社保",
              url: "/shenyangshi"
            },
            {
              name: "上海市社保",
              url: "/shanghaishi"
            },
            {
              name: "苏州市社保",
              url: "/suzhoushi"
            },
            {
              name: "三门峡市社保",
              url: "/sanmenxiashi"
            },
            {
              name: "十堰市社保",
              url: "/shiyanshi"
            },
            {
              name: "韶关市社保",
              url: "/shaoguanshi"
            },
            {
              name: "深圳市社保",
              url: "/shenzhenshi"
            },
            {
              name: "汕头市社保",
              url: "/shantoushi"
            },
            {
              name: "三亚市社保",
              url: "/sanyanshi"
            },
            {
              name: "天津市社保",
              url: "/tianjinshi"
            },
            {
              name: "唐山市社保",
              url: "/tangshanshi"
            },
            {
              name: "太原市社保",
              url: "/taiyuanshi"
            },
            {
              name: "台州市社保",
              url: "/taizhoushi"
            },
            {
              name: "泰安市社保",
              url: "/taianshi"
            }
          ]
        },
        {
          name: "U-W",
          children: [
            {
              name: "无锡市社保",
              url: "/wuxishi"
            },
            {
              name: "温州市社保",
              url: "/wenzhoushi"
            },
            {
              name: "潍坊市社保",
              url: "/weifangshi"
            },
            {
              name: "威海市社保",
              url: "/weihaishi"
            },
            {
              name: "武汉市社保",
              url: "/wuhanshi"
            }
          ]
        },
        {
          name: "X-Z",
          children: [
            {
              name: "厦门市社保",
              url: "/xiamenshi"
            },
            {
              name: "新余市社保",
              url: "/xinyvshi"
            },
            {
              name: "西安市社保",
              url: "/xianshi"
            },
            {
              name: "西宁市社保",
              url: "/xiningshi"
            },
            {
              name: "岳阳市社保",
              url: "/yueyangshi"
            },
            {
              name: "益州市社保",
              url: "/yizhoushi"
            },
            {
              name: "永州市社保",
              url: "/yongzhoushi"
            },
            {
              name: "张家口市社保",
              url: "/zhangjiakoshi"
            },
            {
              name: "郑州市社保",
              url: "/zhengzhoushi"
            },
            {
              name: "珠海市社保",
              url: "/zhuhaishi"
            },
            {
              name: "湛江市社保",
              url: "/zhanjiangshi"
            },
            {
              name: "肇庆市社保",
              url: "/zhaoqingshi"
            },
            {
              name: "中山市社保",
              url: "/zhongshanshi"
            },
            {
              name: "资阳市社保",
              url: "/ziyangshi"
            }
          ]
        }
      ],
      shuichou: [
        {
          name: "华南地区",
          children: [
            {
              name: "广州优惠政策",
              url: "/gz"
            },
            {
              name: "深圳优惠政策",
              url: "/sz"
            },
            {
              name: "肇庆优惠政策",
              url: "/zq"
            }
          ]
        },
        {
          name: "华东地区",
          children: [
            {
              name: "上海优惠政策",
              url: "/sh"
            },
            {
              name: "杭州优惠政策",
              url: "/hz"
            },
            {
              name: "马鞍山优惠政策",
              url: "/mas"
            },
            {
              name: "台州优惠政策",
              url: "/tz"
            },
            {
              name: "乌镇优惠政策",
              url: "/wz"
            },
            {
              name: "合肥优惠政策",
              url: "/hf"
            },
            {
              name: "日照优惠政策",
              url: "/rz"
            },
            {
              name: "舟山优惠政策",
              url: "/zs"
            },
            {
              name: "阜阳优惠政策",
              url: "/fy"
            },
            {
              name: "安福优惠政策",
              url: "/af"
            },
            {
              name: "吉安优惠政策",
              url: "/ja"
            }
          ]
        },
        {
          name: "华中地区",
          children: [
            {
              name: "武汉优惠政策",
              url: "/wh"
            },
            {
              name: "长沙优惠政策",
              url: "/cs"
            },
            {
              name: "黄冈优惠政策",
              url: "/hg"
            },
            {
              name: "老河口优惠政策",
              url: "/lhk"
            },
            {
              name: "南宁优惠政策",
              url: "/nn"
            }
          ]
        },
        {
          name: "华北地区",
          children: [
            {
              name: "北京优惠政策",
              url: "/bj"
            },
            {
              name: "天津优惠政策",
              url: "/tj"
            },
            {
              name: "内丘优惠政策",
              url: "/nq"
            },
            {
              name: "阳泉优惠政策",
              url: "/yq"
            }
          ]
        },
        {
          name: "东北地区",
          children: [
            {
              name: "长春优惠政策",
              url: "/cc"
            }
          ]
        },
        {
          name: "西南地区",
          children: [
            {
              name: "重庆优惠政策",
              url: "/qq"
            },
            {
              name: "成都优惠政策",
              url: "/cd"
            },
            {
              name: "贵阳优惠政策",
              url: "/gy"
            },
            {
              name: "绵阳优惠政策",
              url: "/my"
            }
          ]
        },
        {
          name: "西北地区",
          children: [
            {
              name: "兰州优惠政策",
              url: "/lz"
            },
            {
              name: "乌鲁木齐优惠政策",
              url: "/wlmq"
            }
          ]
        }
      ]
    };
  },
  props: ["show", "type"],
  methods: {
    stop(e) {
      if(e.target.className.indexOf('choose') > -1){
        e.preventDefault()
      }
      e.stopPropagation()
    },
    hide() {
      this.show = false
    }
  }
};
</script>
<style scoped>
.choose {
  position: fixed;
  top: 0rem;
  left: 0rem;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 10;
}
.choose>div{
  position: absolute;
  top: 1.2rem;
  left: 0.3rem;
  width: calc(100% - 0.6rem);
  height: calc(100% - 2rem);
  overflow: scroll;
  font-size: 0.3rem;
  color: #333;
  background-color: #f8f8f8;
  border-radius: 0.05rem;
  padding: 0.2rem;
  box-shadow: 0 0 0.02rem #aaa;
}
.citem {
  margin-bottom: 0.2rem;
}
.citem > div:nth-child(1) {
  font-weight: bold;
  background-color: #ededed;
  margin-bottom: 0.2rem;
}
.ca {
  display: inline-block;
  margin-left: 0.2rem;
  font-size: 0.28rem;
  color: #666;
  line-height: 0.5rem;
}
</style>
